<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/12/8
  Time: 17:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="指定日期班次性能参数的历史趋势"/>
</jsp:include>

<jsp:include page="../../include/admin_header.jsp"/>
<jsp:include page="../../include/admin_sidebar.jsp"/>

<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display:inline-block">指定日期班次性能参数的历史趋势</h4>
    </section>
    <section class="content" style="min-height:0px">
        <%--折线图选项条--%>
        <div style="width:100%;border:1px solid #cdd9e1;background-color:#fff">
            <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
                <div class="row sie-chart-title">
                    <div class="sie-title-des">shift OEE and so on</div>
                    <div class="sie-chart-btn">
                        <div style="display: inline-block">
                            <a id="exportSubmit" href="javascript:;" class="hollow-button-green hidden" style="line-height: 2.5;" onclick="exportChartData()"><spring:message code="label.export.data"/></a>
                        </div>
                    </div>
                </div>
                <div style="padding: 15px 15px 15px  50px;">
                    <div class="row">
                        <div class="col-md-2">
                            <label style="min-width: 50px;">租户:</label>
                            <select id="select_tenant" class="form-control" style="max-width: 150px;height: 30px;padding: 0 2px;border-radius:5px;display: inline-block"
                                    onchange="tenantChange(this,'service')">
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">类型:</label>
                            <select id="type" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">型号:</label>
                            <select id="model" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">组:</label>
                            <select id="group" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label style="min-width: 50px;">流水线:</label>
                            <select id="line" class="form-control sie-other-condition" disabled="disabled" onchange="adminSearchClick();">
                                <%--<option data-id="1">全部</option>--%>
                            </select>
                        </div>
                        <%--<div class="col-md-2">--%>
                            <%--<label style="min-width: 50px;">&nbsp;</label>--%>
                            <%--<a id="search" href="javascript:;" class="solid-button-orange">查找</a>--%>
                        <%--</div>--%>
                    </div>
                </div>
                <div style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="display: inline-block;color:#000;font-size:14px"><spring:message code="label.choice.device"/>:</div>
                    <div style="display: inline-block;display:-ms-inline-flexbox;margin-bottom: 5px;">
                        <select id="select_device" class="form-control" style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius:5px;"
                                onchange="deviceChange(this)">

                        </select>
                    </div>
                    <div style="display: inline-block">
                        <a href="javascript:;" class="hollow-button-green" style="line-height: 2.5;" <%--id="indexContrast"--%>
                           onclick="showReset('','#rf_reset','indexContrast_shift_select','service_shift')"><spring:message code="label.contrast"/></a>
                    </div>
                </div>
                <%--line--%>
                <div class="hidden" style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="width: 100%;height: 30px;color:#000" id="indexParamShift">
                        <div class="radio selected"  data-name="oee">OEE</div>
                        <div class="radio" data-name="availability">AVAILABILITY</div>
                        <div class="radio" data-name="quality">QUALITY</div>
                        <div class="radio" data-name="performance">PERFORMANCE</div>
                    </div>
                </div>
                <div class="chartContainer hidden" style="padding:10px 15px 10px 50px;display: -webkit-box;color: white;font-size: 12px;">
                    <div style="width: 100%;line-height: 2.4;border-radius:10px;display: -webkit-box;">
                        <div class="sie-calendar-parent">
                            <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" placeholder='<spring:message code="label.choice.date"/>' id="service_shift_getDate">
                            <img src="/images/calendar.png" class="sie-calendar-img">
                        </div>
                    </div>
                </div>
                <div id="serviceShiftLine" style="padding: 20px;">

                </div>
            </div>
        </div>
    </section>
</div>
<div id="rf_reset" class="hidden"
     style="padding: 26px;width:370px;height:474px;border-radius: 10px;border: 1px solid #ccd7df">
    <div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;"><spring:message
                    code="label.device.type"/>:</label>

            <div class="col-md-8" style="padding: 0 0">
                <input id="deviceType" class="form-control sie-input-border sie-input-uwh"
                       style="margin-top: 5px;padding: 0 12px;background-color: #fff;" value="${device.deviceType}" disabled="disabled">
            </div>
        </div>

        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;"><spring:message
                    code="label.device.model"/>:</label>

            <div class="col-md-8" style="padding: 0 0">
                <input id="deviceModel" class="form-control sie-input-border sie-input-uwh"
                       style="margin-top: 5px;padding: 0 12px;background-color: #fff;" value="${device.deviceModel}" disabled="disabled">
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;">租户:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="tenants" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 5px;padding-left: 0;padding-right: 10px;">组:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="deviceGroup" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div class="form-group form-group-change" style="margin-bottom: 15px">
            <label class="col-md-4 sie-left-name" style="margin-top: 10px;padding-left: 0;padding-right: 10px;">流水线:</label>

            <div class="col-md-8" style="padding: 0 0">
                <select id="deviceLine" class="form-control sie-input-border sie-input-uwh" style="margin-top: 5px;padding: 0 12px;border-radius:5px;display: inline-block" onchange="loadAdminAlertData()">

                </select>
            </div>
        </div>
        <div id="device_checkbox" class="col-md-12 scrollbar sie-flex-container"
             style="margin-top:10px;height: 180px;overflow: auto;">

        </div>
        <div style="width: 100%;text-align: center">
            <button id="contrast_select_sure" class="btn"
                    style="width: 70px;font-size: 12px;background-color: #50bed7;height: 25px;padding: 0;margin-top: 28px;column-rule: #fff;">
                <spring:message code="label.admin.confirm"/>
            </button>
        </div>
    </div>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/../js/dx.all.js"></script>
<script src="/../js/charts.js"></script>
<script>
    var exportData = {};
    var deviceUpdate = false;
    $(document).ready(function () {
//        $("#search").click(function(){
//            adminSearchClick();
//        });
        bindDateInputClickEvent();
        adminLoadTenantForChart();
    });

    function tenantChange(dom, prefix) {
        $("#exportSubmit").addClass("hidden");
        $('#select_device').empty();
        $(".chartContainer").addClass("hidden");
        $("#device_checkbox").find(".item-checked").removeClass("item-checked");
//        createIndexServicesShiftLineChart([], []);
        createShiftServicesLineChartNew([],[], {},'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
        if ($("#select_tenant").find("option:selected").data("option") == "first") {
            return;
        }
        adminLoadDeviceOtherForChart();
    }

    function deviceChange(dom) {
        $("#exportSubmit").addClass("hidden");
        $("#device_checkbox").find(".item-checked").removeClass("item-checked");
        if($("#service_shift_getDate").val() != dateFormat(new Date)){
            deviceUpdate = true;
            $("#service_shift_getDate").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#service_shift_getDate").datepicker("update");
        }
        $(".radio").removeClass("selected");
        $($(".radio")[0]).addClass("selected");
        createShiftServicesLineChartNew([],[], {},'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');

        if($("#select_device").find("option:selected").data("option") == 'first'){
            $(".chartContainer").addClass("hidden");
            return;
        }
        $(".chartContainer").removeClass("hidden");
        $("#deviceType").val($("#select_device").find("option:selected").data("devicetype"));
        $("#deviceModel").val($("#select_device").find("option:selected").data("devicemodel"));
        loadAdminAlertLineAndGroupData();
        loadAdminAlertData();
        indexServicesShiftLineChart(null,null);
    }

    //获取数据：某天全部班次 oee或performance或quality或availability indexParam趋势
    function indexServicesShiftLineChart(dom,prefix){
        $("#exportSubmit").addClass("hidden");
        if($("#service_shift_getDate").val() == ""){
            swal({
                title:"<spring:message code="label.warning"/>",
                text:'<spring:message code="label.please.choice.date"/>',
                type:"warning",
                showCancelButton:false,
                showConfirmButton:true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation:"slide-from-top"
            },function(){
                $("#exportSubmit").addClass("hidden");
                createShiftServicesLineChartNew([],[], {},'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
                return;
            });
        }

        var data = {};
        var indexParam = $("#indexParamShift").find(".selected").data("name");
        data["day"] = $("#service_shift_getDate").val();
        data["type"] = indexParam;
        data["tenantAndDevice"] = [{
            tenantId: $("#select_tenant").find("option:selected").data("tenantid"),
            deviceId: $("#select_device").find("option:selected").data("deviceid")
        }];
        var series = [{
            valueField:$("#select_device").find("option:selected").text().trim(),
            name:$("#select_device").find("option:selected").text().trim()
        }];

        if ($("#device_checkbox").find(".item-checked").length != 0) {
            var $checkboxs = $("#device_checkbox").find(".item-checked").find("a");
            for (var i = 0; i < $checkboxs.length; i++) {
                var serie = {};
                data["tenantAndDevice"].push({
                    tenantId: $($checkboxs[i]).data("tenantid"),
                    deviceId: $($checkboxs[i]).data("deviceid"),
                });   //id
                serie["valueField"] = $($checkboxs[i]).data("devicename");  //name
                serie["name"] = $($checkboxs[i]).data("devicename");
                series.push(serie);
            }
        }
        exportData = data;
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/product/shiftService",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (json) {
                    var dataSource = [];
                    if (json.result != "SUCCESS" || json.data == null) {
                        createShiftServicesLineChartNew(dataSource, series, data["type"],'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
                        dtd.resolve();
                        return;
                    }
                    if (Object.keys(json.data).length == 0) {
                        createShiftServicesLineChartNew(dataSource, series, data["type"],'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
                        dtd.resolve();
                        return;
                    }

                    if ((json.data.length == 1) && (json.data[0].data.length == 0)) {
                        createShiftServicesLineChartNew(dataSource, series, data["type"],'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
                        dtd.resolve();
                        return;
                    }

                    var service = json.data;
                    for (var j = 0; j < service.length; j++) {
                        var copy = {};
                        if (dataSource.length == 0) {
                            copy["time"] = service[j]["shift_start_time"];
                            copy[service[j]["deviceName"]] = service[j][indexParam];
                            dataSource.push(copy);
                        } else {
                            for (var i = 0; i < dataSource.length; i++) {
                                if (dataSource[i].time == service[j]["shift_start_time"]) {
                                    dataSource[i][service[j]["deviceName"]] = service[j][indexParam];
                                    break;
                                } else if (i == (dataSource.length - 1)) {
                                    copy["time"] = service[j]["shift_start_time"];
                                    copy[service[j]["deviceName"]] = service[j][indexParam];
                                    dataSource.push(copy);
                                    break;
                                }
                            }
                        }
                    }
                    createShiftServicesLineChartNew(dataSource, series, data["type"],'<spring:message code="label.chart.shift.oee"/>','<spring:message code="label.device"/>','<spring:message code="label.time"/>');
                    $("#exportSubmit").removeClass("hidden");
                    dtd.resolve();
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                    dtd.resolve();
                }
            });
        });

        hidePopup();
    }

    //获取机床 根据 机床type 和机床 model
    function getDevicesByTypeAndModel() {
        $("#device_checkbox").empty();
        $.ajax({
            url: '/admin/api/v1/getDevicesByTypeAndModel',
            type: 'get',
            data: {
                type: $("#deviceType").val(),
                model: $("#deviceModel").val()
            },
            success: function (data) {
                if (data.data.length == 0) {
                    return;
                }
                $.each(data.data, function (index, device) {
                    if (device.device_id != $("#select_device").find("option:selected").data("deviceid")) {
                        var $div;
                        if ($("#device_checkbox").find("#" + device.tenantId).length != 0) {
                            $div = $("<div></div>").addClass("col-md-6 sie-flex-item item-access").attr("onclick", "addcheckd(this)").append(
                                    $("<a></a>").addClass("sie-checkbox checked").attr("data-deviceid", device.device_id).attr("data-devicename",device.device_unique_id).attr("data-tenantid", device.tenantId).attr("style", "margin-left: 15px;")).append(
                                    $("<span></span>").attr("style", "margin-left:5px;").text(device.device_unique_id));
                            $("#device_checkbox").find("#" + device.tenantId).append($div);
                        } else {
                            $div = $("<div></div>").attr("id", device.tenantId).addClass("row").attr("style", "margin-top:5px;").append(
                                    $("<div></div>").addClass("col-md-12").attr("style", "text-align: left;margin-bottom: 5px;font-weight: 600;").append(
                                            $("<span></span>").text(device.tenantName+"："))).append(
                                    $("<div></div>").addClass("col-md-6 sie-flex-item item-access").attr("onclick", "addcheckd(this)").append(
                                            $("<a></a>").addClass("sie-checkbox checked").attr("data-deviceid", device.device_id).attr("data-devicename",device.device_unique_id).attr("data-tenantid", device.tenantId).attr("style", "margin-left: 15px;")).append(
                                            $("<span></span>").attr("style", "margin-left:5px;").text(device.device_unique_id)));
                            $("#device_checkbox").append($div);
                        }
                    }
                });
            },
            error: function (data) {
                console.log("error");
            }
        });
    }

    function showReset(title, contentElement, onpresent,prefix) {
        if($("#select_device").find("option:selected").length==0 || $("#select_device").find("option:selected").data("option") == 'first'){
            swal({
                title:"<spring:message code="label.warning"/>",
                text:'<spring:message code="label.please.choice.device"/>',
                type:"warning",
                showCancelButton:false,
                showConfirmButton:true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation:"slide-from-top"
            },function(){
                return;
            });
        }else{
            showPopup('', contentElement,onpresent,prefix);
        }
    }

    function addcheckd(_this) {
        if($("#device_checkbox").find(".item-checked").length < 5){
            $(_this).hasClass("item-checked") == true ? $(_this).removeClass("item-checked") : $(_this).addClass("item-checked");
        }else if($(_this).hasClass("item-checked") == true){
            $(_this).removeClass("item-checked");
        }
    }

    //选择机床对比
    $("#contrast_select_sure").click(function(){
        if($(this).data("id") == "indexContrast_select"){

            indexServicesLineChart(this,$(this).data("prefix"));
        }else if($(this).data("id") == "indexContrast_shift_select"){
            indexServicesShiftLineChart(this,$(this).data("prefix"));
        }
    });

    //数据导出
    function exportChartData(){
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/export/shift/oee",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(exportData),
                success: function (result) {
                    if (result.data == null || result.data == "" || result.data == undefined) {
                        dtd.resolve();
                        alert("daochushibai")
                    } else {
                        dtd.resolve();
                        window.location.href = "/api/v1/excel/get?name=" + result.data;
                    }
                },
                error: function (e) {
                    dtd.resolve();
                    console.log(e);
                }
            });
        });
    }
</script>